<template>
  <div class="step-box">
    <div v-if="isShowFlag === 'one'">
      <el-row :gutter="20" class="page-box">
        <el-col :span="12" class="left-box">
          <el-row class="left-top">
            <el-row class="custom-id-title">
              营业执照照片
            </el-row>
            <el-row class="center">
              <div class="card-media-photo"  style="width: 430px;height: 570px;">
                <img :src='bussinessLicense' alt="">
              </div>
            </el-row>
          </el-row>
        </el-col>
        <el-col :span="12" class="right-box">
          <el-row class="custom-id-title">
            办理人证件照片
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" class="center">
              <div class="papers-photo">
                <img :src='frontUrl' alt="">
              </div>
            </el-col>
            <el-col :span="12" class="center">
              <div class="papers-photo">
                <img :src='reverseUrl' alt="">
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="site-identity-title">
            <el-col :span="24">
              办理人现场照片
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24" class="center">
              <div class="peror-photo">
                <img :src='cusSceneUrl' alt="">
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="mt15">
            <el-col :span="24" class="center">
              <el-button type="primary" @click="openVideoSnap">抓拍</el-button>
            </el-col>
          </el-row>
          <el-row class="search-result">
            <el-row :gutter="10" class="per-result">
              <el-col :span="10" class="txt-right">联网核查结果：</el-col>
              <el-col :span="14">{{internetResult}}</el-col>
            </el-row>
            <el-row :gutter="10" class="per-result">
              <el-col :span="10" class="txt-right">人脸识别结果：</el-col>
              <el-col :span="14"><span :class=scoreColor>{{score}}</span> 分</el-col>
            </el-row>
            <el-row :gutter="10" class="per-result">
              <el-col :span="10" class="txt-right">认证结果：</el-col>
              <el-col :span="14">{{onlineResult}}</el-col>
            </el-row>
          </el-row>
        </el-col>
        <el-col :span="24" :gutter="20">
          <el-col :span="12" class="txt-right">
            <el-button type="primary" @click="endEvent">结束交易</el-button>
          </el-col>
          <el-col :span="12" class="txt-left">
            <el-button type="primary" @click="next1to2">确认</el-button>
          </el-col>
        </el-col>
      </el-row>
    </div>
    <div v-else-if="isShowFlag === 'two'" class="mt5 custInfo-box">
      <el-row :gutter="20" class="item-topSet">
        <el-col :span="12">
          <el-col :span="12" class="title-style">开立对公户性质：</el-col>
          <el-col :span="12">{{clientNature}}</el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="12" class="title-style">客户身份：</el-col>
          <el-col :span="12">{{clientIdentity}}</el-col>
        </el-col>
      </el-row>
      <BizCusInfo :isShowFlag="true" :data="cusInfoData" :option="cusInfoOption" class="item-topSet"></BizCusInfo>
      <BizCusInfo :isShowFlag="true" :data="legalCusInfoData" :option="legalCusInfoOption" class="item-topSet"></BizCusInfo>
      <BizCusInfo :isShowFlag="true" v-if="clientIdentityFlag" :data="operatorCusInfoData" :option="operatorCusInfoOption" class="item-topSet"></BizCusInfo>
      <el-row class="view-bottom">
        <el-row :gutter="20" v-if="!checkInfoModifyFlag">
          <el-col :span="12" class="txt-right">
            <el-button type="primary" @click="next2to2">修改</el-button>
          </el-col>
          <el-col :span="12" class="txt-left">
            <el-button type="primary" @click="next2to2to1">确认</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="checkInfoModifyFlag">
          <el-col :span="24" class="txt-center">
            <el-button type="primary" @click="sendCheckInfo">发送给客户</el-button>
          </el-col>
          <!--<el-col :span="12" class="txt-left">-->
            <!--<el-button type="primary" @click="checkInfoEvent">客户确认信息后</el-button>-->
          <!--</el-col>-->
        </el-row>
      </el-row>
    </div>
    <div v-else-if="isShowFlag === 'three'" class="mt5 custInfo-box">
      <h4>签约信息</h4>
      <el-row>
        <el-row class="operator-box">
          <el-checkbox v-model="onlineBankFlag" :disabled="signCheckSelectFlag" @change="signCheckSelectChange('online', onlineBankFlag)">网上银行</el-checkbox>
          <BizSignInfo :isShowFlag="true" :isShowTitleFlag="true" :data="onlineCheckData" :modifyShowFlag="btnModifyFlag" @delOperator="delOperator"></BizSignInfo>
        </el-row>
        <el-row class="addOperator-icon">
          <el-col v-if="btnModifyFlag">
            <i class="el-icon-circle-plus-outline warning" @click="AddOperator('online')">添加操作员</i>
          </el-col>
        </el-row>
      </el-row>
      <el-row>
        <el-checkbox v-model="phoneBankFlag" class="mb10" :disabled="signCheckSelectFlag" @change="signCheckSelectChange('phone', phoneBankFlag)">电话银行</el-checkbox>
        <BizSignInfo :isShowFlag="true" :data="phoneCheckData" :modifyShowFlag="btnModifyFlag"></BizSignInfo>
      </el-row>
      <el-row>
          <el-checkbox v-model="msgBankFlag" class="mb10" :disabled="signCheckSelectFlag" @change="signCheckSelectChange('message', msgBankFlag)">短信银行</el-checkbox>
          <BizSignInfo :isShowFlag="true" :data="msgCheckData" :modifyShowFlag="btnModifyFlag"></BizSignInfo>
      </el-row>
      <el-row>
          <el-checkbox v-model="factReconBankFlag" class="mb10" :disabled="signCheckSelectFlag" @change="signCheckSelectChange('factRecon', factReconBankFlag)">银企对账</el-checkbox>
          <BizSignInfo :isShowFlag="true" :data="factReconCheckData" :modifyShowFlag="btnModifyFlag"></BizSignInfo>
        </el-row>
      <el-row>
        <el-checkbox v-model="payPwdBankFlag" class="mb10" :disabled="signCheckSelectFlag" @change="signCheckSelectChange('payPwd', payPwdBankFlag)">支付密码业务</el-checkbox>
        <BizSignInfo :isShowFlag="true" :data="payPwdCheckData" :modifyShowFlag="btnModifyFlag"></BizSignInfo>
      </el-row>
      <el-row>
        <el-checkbox v-model="receiptBankFlag" class="mb10" :disabled="signCheckSelectFlag" @change="signCheckSelectChange('receipt', receiptBankFlag)">回单系统</el-checkbox>
        <BizSignInfo :isShowFlag="true" :data="receiptCheckData" :modifyShowFlag="btnModifyFlag"></BizSignInfo>
      </el-row>
      <el-row :gutter="20">
        <el-col v-if="!btnModifyFlag" :span="24">
          <el-col :span="12" class="txt-right">
            <el-button type="primary" @click="modifyEvent">修改</el-button>
          </el-col>
          <el-col :span="12" class="txt-left">
            <el-button type="primary" @click="signInfoConfirmEvent">确认</el-button>
          </el-col>
        </el-col>
        <el-col v-if="btnModifyFlag" :span="24">
          <el-col :span="24" class="txt-center">
            <el-button type="primary" @click="sendSignInfoToCustomer">发送给客户</el-button>
          </el-col>
          <!--<el-col :span="12" class="txt-left">-->
            <!--<el-button type="primary" @click="clientConfirmEvent">客户端确认信息后</el-button>-->
          <!--</el-col>-->
        </el-col>
      </el-row>
    </div>
    <div v-else-if="isShowFlag === 'four'" class="mt5 custInfo-box">
      <el-row :gutter="20" class="page-box">
        <el-col :span="12" class="left-box">
          <el-scrollbar style="height:100%;">
            <el-tabs style="height: 100%;" v-model="leftActiveName" @tab-click="handleClick" type="border-card" :stretch="true">
              <el-tab-pane  label="开户信息" name="openInfo">
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-col :span="12" class="title-style">开立对公户性质：</el-col>
                    <el-col :span="12">{{clientNature}}</el-col>
                  </el-col>
                  <el-col :span="24" class="item-topSet">
                    <el-col :span="12" class="title-style">客户身份：</el-col>
                    <el-col :span="12">{{clientIdentity}}</el-col>
                  </el-col>
                  <el-col :span="24" class="item-topSet paddinglr0">
                    <el-col :span="12" class="title-style paddinglr10">单位/企业基本信息</el-col>
                    <el-col :span="12">
                      <button
                        :class="[iconShowFlag ? 'el-icon-caret-top' : 'el-icon-caret-bottom', 'color-red', 'arrow']"
                        @click="showDetailEvent"></button>
                    </el-col>
                    <el-col :span="24">
                      <el-col :span="12" class="line-distance">单位/企业名称：</el-col>
                      <el-col :span="12" class="line-distance">{{cusInfoData.cusName}}</el-col>
                    </el-col>
                    <el-col :span="24">
                      <el-col :span="12" class="line-distance">单位/企业类型：</el-col>
                      <el-col :span="12" class="line-distance">{{cusInfoData.cusType}}</el-col>
                    </el-col>
                    <el-col :span="24">
                      <el-col :span="12" class="line-distance">单位/企业证件种类：</el-col>
                      <el-col :span="12" class="line-distance">{{cusInfoData.cusIdType}}</el-col>
                    </el-col>
                    <el-col :span="24">
                      <el-col :span="12" class="line-distance">单位/企业证件号码：</el-col>
                      <el-col :span="12" class="line-distance">{{cusInfoData.cusIdCard}}</el-col>
                    </el-col>
                    <el-col :span="24">
                      <el-col :span="12" class="line-distance">注册地址：</el-col>
                      <el-col :span="12" class="line-distance">{{cusInfoData.cusAddress}}</el-col>
                    </el-col>
                    <el-col :span="24">
                      <el-col :span="12" class="line-distance">法定代表人：</el-col>
                      <el-col :span="12" class="line-distance">{{cusInfoData.cusLegal}}</el-col>
                    </el-col>
                    <div v-show="iconShowFlag">
                      <el-col :span="24">
                        <el-col :span="12" class="line-distance">注册资本：</el-col>
                        <el-col :span="12" class="line-distance">{{cusInfoData.cusRegistered}}</el-col>
                      </el-col>
                      <el-col :span="24">
                        <el-col :span="12" class="line-distance">单位/企业成立日期：</el-col>
                        <el-col :span="12" class="line-distance">{{cusInfoData.cusSetUpDate}}</el-col>
                      </el-col>
                      <el-col :span="24">
                        <el-col :span="12" class="line-distance">单位/企业营业期限：</el-col>
                        <el-col :span="12" class="line-distance">{{cusInfoData.cusBussinessTerm}}</el-col>
                      </el-col>
                      <el-col :span="24">
                        <el-col :span="12" class="line-distance">单位/企业联系电话：</el-col>
                        <el-col :span="12" class="line-distance">{{cusInfoData.cusPhone}}</el-col>
                      </el-col>
                      <el-col :span="24">
                        <el-col :span="12" class="line-distance">经营范围：</el-col>
                        <el-col :span="12" class="line-distance line-space-special">{{cusInfoData.cusBussinessScope}}</el-col>
                      </el-col>
                    </div>
                  </el-col>
                </el-row>
                <BizCusInfo :isShowFlag="false" :data="legalCusInfoData" :option="legalCusInfoOption" class="item-topSet rightLeftPadding"></BizCusInfo>
                <BizCusInfo :isShowFlag="false" v-if="clientIdentityFlag" :data="operatorCusInfoData" :option="operatorCusInfoOption" class="item-topSet rightLeftPadding"></BizCusInfo>
              </el-tab-pane>
              <el-tab-pane label="签约信息" name="signInfo">
                <el-row class="operator-box">
                  <el-checkbox v-model="onlineBankFlag" :disabled="signCheckSelectFlag">网上银行</el-checkbox>
                  <BizSignInfo :isShowFlag="false" :isShowTitleFlag="true" :data="onlineCheckData" :modifyShowFlag="btnModifyFlag" class="item-style"></BizSignInfo>
                </el-row>
                <el-row>
                  <el-checkbox class="mb10" v-model="phoneBankFlag" :disabled="signCheckSelectFlag">电话银行</el-checkbox>
                  <BizSignInfo :isShowFlag="false" :data="phoneCheckData" :modifyShowFlag="btnModifyFlag"></BizSignInfo>
                </el-row>
                <el-row>
                  <el-checkbox v-model="msgBankFlag" class="mb10" :disabled="signCheckSelectFlag">短信银行</el-checkbox>
                  <BizSignInfo :isShowFlag="false" :data="msgCheckData" :modifyShowFlag="btnModifyFlag"></BizSignInfo>
                </el-row>
                <el-row>
                  <el-checkbox v-model="factReconBankFlag" class="mb10" :disabled="signCheckSelectFlag">银企对账</el-checkbox>
                  <BizSignInfo :isShowFlag="false" :data="factReconCheckData" :modifyShowFlag="btnModifyFlag"></BizSignInfo>
                </el-row>
                <el-row>
                  <el-checkbox v-model="payPwdBankFlag" class="mb10" :disabled="signCheckSelectFlag">支付密码业务</el-checkbox>
                  <BizSignInfo :isShowFlag="false" :data="payPwdCheckData" :modifyShowFlag="btnModifyFlag"></BizSignInfo>
                </el-row>
                <el-row>
                  <el-checkbox v-model="receiptBankFlag" class="mb10" :disabled="signCheckSelectFlag">回单系统</el-checkbox>
                  <BizSignInfo :isShowFlag="false" :data="receiptCheckData" :modifyShowFlag="btnModifyFlag"></BizSignInfo>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-scrollbar>
        </el-col>
        <el-col :span="12" class="right-box add-border paddinglr0">
          <el-row v-show="flag2to2">
            <el-row class="view-header">法人身份验证</el-row>
            <el-scrollbar style="height:100%;">
              <el-row class="view-middle mt10">
                <el-row :gutter="10">
                  <el-col :span="7" class="txt-center"><el-button type="primary" @click="sendLegalConference">发送邀请短信</el-button></el-col>
                  <el-col :span="17" class="line-distance">点击邀请法人加入视频联络</el-col>
                </el-row>
                <el-row>
                  <el-row class="custom-id-title">
                    法人证件照片
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="12" class="center">
                      <div class="papers-photo">
                        <img :src='legalFrontUrl' alt="">
                      </div>
                    </el-col>
                    <el-col :span="12" class="center">
                      <div class="papers-photo">
                        <img :src='legalReverseUrl' alt="">
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20" class="site-identity-title">
                    <el-col :span="24">
                      法人现场照片
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="24" class="center">
                      <div class="peror-photo">
                        <img :src='legalScenePhoto' alt="">
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20" class="mt5">
                    <el-col :span="24" class="center">
                      <el-button type="primary" @click="openVideoInviteSnap">抓拍</el-button>
                    </el-col>
                  </el-row>
                  <el-row class="search-result">
                    <el-row :gutter="10" class="per-result">
                      <el-col :span="10" class="txt-right">联网核查结果：</el-col>
                      <el-col :span="14">{{inviteInternetResult}}</el-col>
                    </el-row>
                    <el-row :gutter="10" class="per-result">
                      <el-col :span="10" class="txt-right">人脸识别结果：</el-col>
                      <el-col :span="14"><span :class=scoreInviteColor>{{inviteScope}}</span> 分</el-col>
                    </el-row>
                    <el-row :gutter="10" class="per-result">
                      <el-col :span="10" class="txt-right">认证结果：</el-col>
                      <el-col :span="14">{{inviteOnlineResult}}</el-col>
                    </el-row>
                  </el-row>
                </el-row>
              </el-row>
            </el-scrollbar>
            <el-row class="view-bottom">
              <el-button type="primary" @click="next2to3">确认</el-button>
            </el-row>
          </el-row>
          <el-row v-show="flag2to3">
            <el-row class="view-header">开户意愿确认</el-row>
            <el-scrollbar style="height:100%;">
              <el-form :model="accountForm" class="view-middle mt10 paddinglr10">
                <el-row>
                  <el-col>1.请问您是{{cusInfoData.cusName}}(单位名称)的法定代表人或负责人吗？</el-col>
                  <el-radio-group v-model="accountForm.radio1" size="small" class="mt10">
                    <el-col><el-radio label="1">是</el-radio></el-col>
                    <el-col class="mt10"><el-radio label="0">否</el-radio></el-col>
                  </el-radio-group>
                </el-row>
                <el-row class="mt10">
                  <el-col>2.请问您是否同意在本行开立{{cusInfoData.cusName}}(单位名称)的基本/一般存款账户？</el-col>
                  <el-radio-group v-model="accountForm.radio2" size="small" class="mt10">
                    <el-col><el-radio label="1">是</el-radio></el-col>
                    <el-col class="mt10"><el-radio label="0">否</el-radio></el-col>
                  </el-radio-group>
                </el-row>
                <el-row class="mt10">
                  <el-col>3.请确认贵单位提供的开户申请资料是否真实、有效？</el-col>
                  <el-radio-group v-model="accountForm.radio3" size="small" class="mt10">
                    <el-col><el-radio label="1">是</el-radio></el-col>
                    <el-col class="mt10"><el-radio label="0">否</el-radio></el-col>
                  </el-radio-group>
                </el-row>
                <el-row class="mt10">
                  <el-col>4.请确认贵单位申请开立的基本存款账户是否是贵单位唯一的基本存款账户？</el-col>
                  <el-radio-group v-model="accountForm.radio4" size="small" class="mt10">
                    <el-col><el-radio label="1">是</el-radio></el-col>
                    <el-col class="mt10"><el-radio label="0">否</el-radio></el-col>
                  </el-radio-group>
                </el-row>
                <el-row class="mt10" v-if="clientIdentityFlag">
                  <el-col>5.{{operatorCusInfoData.cusName}}(经办人姓名)是受您委托办理贵公司开户业务</el-col>
                  <el-radio-group v-model="accountForm.radio5" size="small" class="mt10">
                    <el-col><el-radio label="1">是</el-radio></el-col>
                    <el-col class="mt10"><el-radio label="0">否</el-radio></el-col>
                  </el-radio-group>
                </el-row>
                <el-row class="mt10" v-if="clientIdentityFlag">
                  <el-col>6.{{operatorCusInfoData.cusName}}(经办人姓名)是受您委托办理贵公司账户签约业务？签约项目有：<span v-if="onlineBankFlag">网上银行、</span><span v-if="phoneBankFlag">电话银行、</span><span v-if="msgBankFlag">短信银行、</span><span v-if="factReconBankFlag">银企对账、</span><span v-if="payPwdBankFlag">支付密码业务、</span><span v-if="receiptBankFlag">回单系统</span>？（根据签约项目勾选情况提问）</el-col>
                  <el-radio-group v-model="accountForm.radio6" size="small" class="mt10">
                    <el-col><el-radio label="1">是</el-radio></el-col>
                    <el-col class="mt10"><el-radio label="0">否</el-radio></el-col>
                  </el-radio-group>
                </el-row>
              </el-form>
            </el-scrollbar>
            <el-row class="view-bottom">
              <el-button type="primary" @click="next3to4">确认</el-button>
            </el-row>
          </el-row>
          <el-row v-show="flag3to4">
            <el-row class="view-header">表单签名确认</el-row>
            <el-row class="view-middle mt10 paddinglr10">
              <el-row class="partOne">
                <el-row style="height: 100%" v-if="btnFlag === 'fromSignatureFlag'">
                  <bizSignFormInfo :isTrue="bussinessModelFlag" :data="bizSignFormData"></bizSignFormInfo>
                </el-row>
                <el-row v-if="btnFlag === 'agreementSignatureFlag'">
                  <h4>请阅读以下协议</h4>
                   <el-col><el-link type="danger" class="mt10" @click="agreementEvent('A1')">《苏州农商银行单位人民币银行结算账户管理协议》</el-link></el-col>
                   <el-col v-if="onlineBankFlag"><el-link type="danger" class="mt10" @click="agreementEvent('A2')">《苏州农商银行企业网上银行业务章程》</el-link></el-col>
                   <el-col v-if="factReconBankFlag"><el-link type="danger" class="mt10" @click="agreementEvent('A3')">《苏州农商银行银企对账服务协议》</el-link></el-col>
                   <el-col v-if="payPwdBankFlag"><el-link type="danger" class="mt10" @click="agreementEvent('A4')">《苏州农商银行支付密码使用协议》</el-link></el-col>
                </el-row>
              </el-row>
              <el-row class="partTwo">
                <el-col><h4>客户签名</h4></el-col>
                <el-col class="signNameBox mt10">
                  <el-col class="txt-center" v-if="btnFlag === 'fromSignatureFlag'"><h2 v-if="signFormContainer" class="signatureContainer">表单签名区</h2><img v-if="!signFormContainer" :src='signFormContainerUrl' alt=""></el-col>
                  <el-col class="txt-center" v-else="btnFlag === 'agreementSignatureFlag'"><h2 v-if="agreementSignature" class="signatureContainer">协议签名区</h2><img v-if="!agreementSignature" :src='agreementSignatureUrl' alt=""></el-col>
                </el-col>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-row :gutter="20" v-if="bottomShowFlag === 'afterSignatureBtnFlag'">
                <el-col :span="24" class="txt-center">
                  <el-button type="primary" @click="bizSignFormToCustomerEvent(btnFlag)">发送给客户</el-button>
                </el-col>
                <!--<el-col :span="12" class="txt-left">-->
                  <!--<el-button type="primary" @click="afterSignatureEvent(btnFlag)">客户签名后</el-button>-->
                <!--</el-col>-->
              </el-row>
              <el-row :gutter="20" v-else-if="bottomShowFlag === 'confirmSignatureFlag'">
                <el-col :span="12" class="txt-right">
                  <el-button type="primary" @click="bizResSignFormToCustomerEvent(btnFlag)">重新签字</el-button>
                </el-col>
                <el-col :span="12" class="txt-left">
                  <el-button type="primary" @click="signatureConfirmEvent(btnFlag)">确认</el-button>
                </el-col>
              </el-row>
            </el-row>
          </el-row>
          <el-row v-show="flag4to4">
            <el-row class="view-header">法人承诺</el-row>
            <el-row class="view-middle mt10 paddinglr10">
              <el-row class="promise-paper">
                <el-col class="padding-line-height">请您读出如下承诺：</el-col>
                <el-col class="padding-line-height text-indent">我承诺：我作为法人代表申请在{{bankName}}开立企业对公账户，账户类别为{{clientNature}}，此次申请
                开立账户意愿明确，所提供证件正式有效，将严格按照账户管理协议使用该账户，不转借、租借、出售给他人使用，不使用该账户参与诈骗、偷逃税款、逃废债务、贪污受贿、套取现金、洗钱、 恐怖融资等其他违法犯罪活动。
                </el-col>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" @click="settleInfoNextEvent">确认</el-button>
            </el-row>
          </el-row>
          <el-row v-show="flag4to5">
            <el-row class="view-header">开户确认书</el-row>
            <el-row class="view-middle mt10 paddinglr10">
              <openAccount :clientNature="clientNature" :bankName="bankName" :option="openAccountOption" :data="openAccountList"></openAccount>
              <el-row class="partTwo">
                <el-col><h4>客户签名</h4></el-col>
                <el-col class="signNameBox mt10">
                  <el-col class="txt-center" v-if="btnFlag === 'openAccountFlag'"><h2 v-if="openAccountContainer" class="signatureContainer">开户确认书签名区</h2><img v-if="!openAccountContainer" :src='openAccountContainerUrl' alt=""></el-col>
                </el-col>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-row :gutter="20" v-if="bottomShowFlag === 'afterSignatureBtnFlag'">
                <!--<el-col :span="24" class="txt-center">-->
                  <!--<el-button type="primary" @click="bizSignFormToCustomerEvent(btnFlag)">发送给客户</el-button>-->
                <!--</el-col>-->
                <!--<el-col :span="12" class="txt-left">-->
                  <!--<el-button type="primary" @click="afterSignatureEvent(btnFlag)">客户签名后</el-button>-->
                <!--</el-col>-->
              </el-row>
              <el-row :gutter="20" v-else-if="bottomShowFlag === 'confirmSignatureFlag'">
                <el-col :span="12" class="txt-right">
                  <el-button type="primary" @click="bizResSignFormToCustomerEvent(btnFlag)">重新签字</el-button>
                </el-col>
                <el-col :span="12" class="txt-left">
                  <el-button type="primary" @click="signatureConfirmEvent(btnFlag)">确认</el-button>
                </el-col>
              </el-row>
            </el-row>
          </el-row>
          <el-row v-show="flag4to6">
            <el-row class="view-header">交割信息确认</el-row>
            <el-row class="view-middle mt10">
              <el-scrollbar>
                <el-row class="view-middle-header">
                  <el-row class="txt-center">交割信息</el-row>
                  <el-row class="padding-line-height">
                    <el-col :span="6" :offset="4">账户类别：</el-col>
                    <el-col :span="14">{{clientNature}}</el-col>
                  </el-row>
                  <el-row class="padding-line-height">
                    <el-col :span="6" :offset="4">实物交割网点：</el-col>
                    <el-col :span="14">{{deliveryInfoData.delivery}}</el-col>
                  </el-row>
                  <el-row class="padding-line-height">
                    <el-col :span="6" :offset="4">交割网点地址：</el-col>
                    <el-col :span="14">{{deliveryInfoData.deliveryAddress}}</el-col>
                  </el-row>
                  <el-row class="padding-line-height">
                    <el-col :span="6" :offset="4">联系方式：</el-col>
                    <el-col :span="14">{{deliveryInfoData.deliveryTel}}</el-col>
                  </el-row>
                  <el-row class="padding-line-height">
                    <el-col :span="6" :offset="4">附件：</el-col>
                    <el-col :span="14"></el-col>
                  </el-row>
                  <el-row>
                    <el-col class="padding-line-height" :span="24" :offset="4">交割清单</el-col>
                    <el-col v-if="clientNature === '一般户'" class="padding-line-height submitSettleInfoContent" :span="24" :offset="4">
                      1.三证合一后的营业执照正本或者副本<br>
                      2.法定代表人（单位负责人）身份证原件<br>
                      3.经办人身份证原件<br>
                      4.公章、法人章、财务章（可用公章代替）<br>
                      5.股东出资证明文件如公司章程（个体工商户无须提供）<br>
                      6.开户许可证（基本存款账户信息）<br>
                      7.分公司申请开户时提供上级机构资料<br>
                      8.其他申请开立账户需提供的文件<br>
                    </el-col>
                    <el-col v-if="clientNature !== '一般户'" class="padding-line-height submitSettleInfoContent" :span="24" :offset="4">
                      1.三证合一后的营业执照正本或者副本<br>
                      2.法定代表人（单位负责人）身份证原件<br>
                      3.经办人身份证原件<br>
                      4.公章、法人章、财务章（可用公章代替）<br>
                      5.股东出资证明文件如公司章程（个体工商户无须提供）<br>
                      6.分公司申请开户时提供上级机构资料<br>
                    </el-col>
                  </el-row>
                </el-row>
              </el-scrollbar>
              <el-row class="view-middle-bottom">
                <el-row class="view-header">业务提示</el-row>
                <el-row class="paddinglr10 mt10 padding-line-height">
                  您此次申请开立的账户，可以办理
                  <span v-if="onlineBankFlag">网上银行、</span>
                  <span v-if="phoneBankFlag">电话银行、</span>
                  <span v-if="msgBankFlag">短信银行、</span>
                  <span v-if="factReconBankFlag">银企对账、</span>
                  <span v-if="payPwdBankFlag">支付密码业务、</span>
                  <span v-if="receiptBankFlag">回单系统</span>
                  ，不可以办理
                  <span v-if="!onlineBankFlag">网上银行、</span>
                  <span v-if="!phoneBankFlag">电话银行、</span>
                  <span v-if="!msgBankFlag">短信银行、</span>
                  <span v-if="!factReconBankFlag">银企对账、</span>
                  <span v-if="!payPwdBankFlag">支付密码业务、</span>
                  <span v-if="!receiptBankFlag">回单系统</span>
                  ，需要在此视频认证结束后7个工作日内至我行网点办理实物交割，交割清单请见交割信息附件，请您在7个工作日完成实物交割工作。实物交割的网点为：{{deliveryInfoData.delivery}}支行，网点地址及联系方式，我将推送在屏幕上，请您确认。
                </el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-row v-if="!isSubmitFlag">
                <el-row :gutter="20">
                  <el-col :span="24" class="txt-center">
                    <el-button type="primary" @click="sendSignatureToCustomerNext">发送给客户</el-button>
                  </el-col>
                  <!--<el-col :span="12" class="txt-left">-->
                    <!--<el-button type="primary" @click="settleInfoConfirmEvent">客户确认后</el-button>-->
                  <!--</el-col>-->
                </el-row>
              </el-row>
              <el-row v-else="isSubmitFlag">
                <el-button type="primary" @click="submitSettleInfoEvent">提交</el-button>
              </el-row>
            </el-row>
          </el-row>
          <el-row v-show="flag5to5">
            <el-row class="view-header">交割信息确认</el-row>
            <el-row class="view-middle mt10">
              <el-row class="photo-box">
                <div class="success-photo txt-center">
                  <img src='assets/theme/img/viceoBiz/success.png' alt="">
                </div>
                <el-row class="photo-title">交割信息提交成功</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-row :gutter="20">
                <el-col :span="12" class="txt-right">
                  <el-button type="primary" @click="createVoucherEvent">生成凭证</el-button>
                </el-col>
                <el-col :span="12" class="txt-left">
                  <el-button type="primary">办理其他业务</el-button>
                </el-col>
              </el-row>
            </el-row>
          </el-row>
          <el-row v-show="flag5to6">
            <el-row class="view-header">凭证确认</el-row>
            <el-row class="view-middle mt10">
              <BizCertForm :bizCertData="bizCertData"></BizCertForm>
            </el-row>
            <el-row class="view-bottom">
              <el-row :gutter="20" v-if="credentialShowFlag === 'credentialBtnFlagOne'">
                <el-col :span="24" class="txt-center">
                  <el-button type="primary" @click="CreateVoucherToCustomer">发送给客户</el-button>
                </el-col>
                <!--<el-col :span="12" class="txt-left">-->
                  <!--<el-button type="primary" @click="credentialConfirmEvent(credentialShowFlag)">客户确认后</el-button>-->
                <!--</el-col>-->
              </el-row>
              <el-row :gutter="20" v-if="credentialShowFlag === 'credentialBtnFlagTwo'">
                <el-col :span="24" class="txt-center">
                  <el-button type="primary" @click="credentialSubmitEvent">提交</el-button>
                </el-col>
              </el-row>
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag5to7">
            <el-row class="view-header">凭证确认</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="success-photo center">
                  <img src='assets/theme/img/viceoBiz/success.png' alt="">
                </div>
                <el-row class="photo-title">电子凭证提交成功</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag5to8">
            <el-row class="view-header">提交凭证</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="success-photo center">
                  <img src='assets/theme/img/viceoBiz/cardFail.png' alt="">
                </div>
                <el-row class="photo-title">电子凭证提交失败</el-row>
                <el-row class="photo-title">失败原因：{{certFailReason}}</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
            </el-row>
          </el-row>
          <el-row v-show="flagEnd">
            <el-row class="view-header">交易结束</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="exceed-photo">
                  <img src='assets/theme/img/viceoBiz/ending.png' alt="">
                </div>
                <el-row class="photo-title">交易结束</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom"></el-row>
          </el-row>
          <el-row v-show="agreementFlag">
            <el-row class="view-header">表单签名确认</el-row>
            <el-row class="view-middle">
                <agreeMent :isAgreeMentFlag="isAgreeMentFlag" :partyA="bankName" :partyB="cusInfoData.cusName"></agreeMent>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" @click="closeEvent">关闭</el-button>
            </el-row>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="mt10">
        <el-col :span="24" class="txt-center"><el-button type="primary" @click="endEvent">结束交易</el-button></el-col>
      </el-row>
    </div>
    <el-dialog title="凭证预览" :visible.sync="dialogVisible" width="57%">
      <el-scrollbar style="height: 600px;">
        <img :src="bizCertUrl" alt="">
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="openVideoUploadFileFun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import $ from 'jquery'
  import Axios from 'axios'
  import html2canvas from 'html2canvas'
  import BizCertForm from '@/views/videoBiz/xiaochengxu/forOpenHouse/bizCertForm'
  import BizCusInfo from '@/views/videoBiz/xiaochengxu/forOpenHouse/bizCustInfo'
  import BizSignInfo from '@/views/videoBiz/xiaochengxu/forOpenHouse/bizSignInfo'
  import bizSignFormInfo from '@/views/videoBiz/xiaochengxu/forOpenHouse/bizSignFormInfo'
  import agreeMent from '@/views/videoBiz/xiaochengxu/forOpenHouse/agreeMent'
  import openAccount from '@/views/videoBiz/xiaochengxu/forOpenHouse/openAccount'
  import { queryCusSenceScore, uploadFile, submitBizCert, sendCodeMessage, saveTransPipeline } from '@/api/videoBiz/videoBiz'

  export default {
    name: 'forOpenHouseVideo',
    components: {
      BizCertForm,
      BizCusInfo,
      BizSignInfo,
      bizSignFormInfo,
      agreeMent,
      openAccount
    },
    data () {
      return {
        bankName: '江苏苏州农村商业银行股份有限公司',
        isShowFlag: 'one',
        frontUrl: 'assets/theme/img/viceoBiz/frontPhoto.png',
        reverseUrl: 'assets/theme/img/viceoBiz/reversePhoto.png',
        cusSceneUrl: 'assets/theme/img/viceoBiz/perpr.png',
        bussinessLicense: 'assets/theme/img/viceoBiz/bussinessLicense.png',
        /**************** 联网核查结果 ******************/
        // 分数
        score: 0,
        scoreColor: 'redColor',
        // 核查结果
        internetResult: '00  公民身份证号码与姓名一致，且存在照片',
        onlineResult: '未通过',
        clientNature: '',
        clientIdentity: '',
        legalIdentityFlag: '法人',
        cusInfoOption: {},
        cusInfoData: {},
        legalCusInfoOption: {},
        legalCusInfoData: {},
        operatorCusInfoOption: {},
        operatorCusInfoData: {},
        clientIdentityFlag: true,
        checkInfoModifyFlag: false,
        onlineBankFlag: false,
        onlineCheckData: {},
        phoneBankFlag: false,
        phoneCheckData: {},
        payPwdCheckData: {},
        payPwdBankFlag: false,
        receiptCheckData: {},
        receiptBankFlag: false,
        msgBankFlag: false,
        msgCheckData: {},
        factReconBankFlag: false,
        factReconCheckData: {},
        btnModifyFlag: false,
        signCheckSelectFlag: true,
        leftActiveName: 'openInfo',
        rightActiveName: 'legalPersonID',
        iconShowFlag: false,
        inviteScope: 0,
        inviteOnlineResult: '未通过',
        inviteInternetResult: '00  公民身份证号码与姓名一致，且存在照片',
        scoreInviteColor: 'redColor',
        legalScenePhoto: 'assets/theme/img/viceoBiz/perpr.png',
        legalFrontUrl: 'assets/theme/img/viceoBiz/frontPhoto.png',
        legalReverseUrl: 'assets/theme/img/viceoBiz/reversePhoto.png',
        openAccountList: {},
        openAccountOption: {},
        deliveryInfoData: {},
        flag2to2: true,
        flag2to3: false,
        flag3to4: false,
        flag4to4: false,
        flag4to5: false,
        flag4to6: false,
        flag5to5: false,
        flag5to6: false,
        flag5to7: false,
        flag5to8: false,
        flagEnd: false,
        accountForm: {
          radio1: '',
          radio2: '',
          radio3: '',
          radio4: '',
          radio5: '',
          radio6: '',
        },
        afterSignature: false,
        fourAgreementFlag: false,
        bottomShowFlag: 'afterSignatureBtnFlag',
        isSubmitFlag: false,
        btnFlag: 'fromSignatureFlag',
        signFormContainer: true,
        signFormContainerUrl: '',
        agreementSignature: true,
        agreementSignatureUrl: '',
        openAccountContainer: true,
        openAccountContainerUrl: '',
        agreementFlag: false,
        isAgreeMentFlag: '',
        bussinessModelFlag: false,
        // 表单签名确认
        bizSignFormData: {
          'title': '苏州农商银行开立单位银行结算账户申请书',
          // 存款人信息
          'depositorInfo': {
            'name': '',
            'tel': '',
            'adress': '',
            'email': '苏州吴江',
            'type': '',
            'groupCode': '',
            'time': '2099年 12 月 31 日'
          },
          // 单位负责人
          'UnitPrincipal': '',
          // 法定代表人
          'LegalRepresentative': '',
          // 单位负责人 && 法定代表人 && 双热线联系人
          'signModel': [
            {
              'name': '',
              'certType': '',
              'certNum': '',
              'time': ''
            },
            {
              'name': '',
              'profession': '',
              'tel': ''
            },
            {
              'name': '',
              'profession': '',
              'tel': ''
            }
          ],
          // 行业分类
          'bussinessModel': '',
          'bussinessOption': [
            {
              'label': '农、林、牧、渔业',
              'value': '农、林、牧、渔业'
            },
            {
              'label': '采矿业',
              'value': '采矿业'
            },
            {
              'label': '制造业',
              'value': '制造业'
            },
            {
              'label': '电力、燃气及水的生产供应业',
              'value': '电力、燃气及水的生产供应业'
            },
            {
              'label': '建筑业',
              'value': '建筑业'
            },
            {
              'label': '交通运输、仓储和邮政业',
              'value': '交通运输、仓储和邮政业'
            },
            {
              'label': '信息传输、计算机服务及软件业',
              'value': '信息传输、计算机服务及软件业'
            },
            {
              'label': '批发和零售业',
              'value': '批发和零售业'
            },
            {
              'label': '住宿和餐饮业',
              'value': '住宿和餐饮业'
            },
            {
              'label': '金融业',
              'value': '金融业'
            },
            {
              'label': '房地产业',
              'value': '房地产业'
            },
            {
              'label': '租赁和商务服务业',
              'value': '租赁和商务服务业'
            },
            {
              'label': '科学研究、技术服务和地址勘查业',
              'value': '科学研究、技术服务和地址勘查业'
            },
            {
              'label': '水利、环境和公共设施管理',
              'value': '水利、环境和公共设施管理'
            },
            {
              'label': '居民服务和其他服务业',
              'value': '居民服务和其他服务业'
            },
            {
              'label': '教育业',
              'value': '教育业'
            },
            {
              'label': '卫生、社会保障和社会福利业',
              'value': '卫生、社会保障和社会福利业'
            },
            {
              'label': '文化、教育和娱乐业',
              'value': '文化、教育和娱乐业'
            },
            {
              'label': '公共管理和社会组织',
              'value': '公共管理和社会组织'
            },
            {
              'label': '其他行业',
              'value': '其他行业'
            }
          ],
          // 注册资金
          'registeredCapital': '',
          // 经营范围
          'scopeBusiness': '',
          // 证明文件类型
          'supportingType': [],
          'supportingOption': [
            {
              'label': '长期',
              'value': '长期'
            },
            {
              'label': '非长期',
              'value': '非长期'
            }
          ],
          // 证明文件编号
          'supportingNumber': '',
          // 有限期限至
          'supportingTime': '',
          // 支取方式
          'spendWayModel': [],
          'spendWayModelOption': [
            {
              'label': '印鉴',
              'value': '印鉴'
            },
            {
              'label': '支付密码',
              'value': '支付密码'
            }
          ],
          // 声明
          'statement': '本存款人申请开立单位银行结算账户，并承诺所提供的开户资料真实，有效，遵守单位银行结算账户管理协议。'
        },
        // 业务凭证表单
        credentialShowFlag: 'credentialBtnFlagOne',
        bizCertData: {},
        dialogVisible: false,
        bizCertUrl: '',
        bizCertSeqNo: '',
        certFailReason: ''
      }
    },
    created () {

    },
    mounted () {
      /********************************** 小程序交互信令 ****************************************/
      let self = this
      // 视频进线
      window.eventEmitter.$on('EventOpenHouseVideoRing', (data) => {
        console.log(JSON.stringify(data))
        // 初始化按钮
        self.isShowFlag = 'one'
        self.flag2to2 = true
        self.flagEnd = false
        self.resetGlobalVarible()
        // 客户基本信息
        if ('fr' == data.clientIdentity) {
          self.clientIdentity = '法人'
        } else {
          self.clientIdentity = '经办人'
        }
        // 开立对公户性质
        if ('ybh' == data.clientNature) {
          self.clientNature = '一般户'
        } else if ('lsh' == data.clientNature) {
          self.clientNature = '临时户'
        } else if ('zxh' == data.clientNature) {
          self.clientNature = '专项户'
        } else {
          self.clientNature = '基本户'
        }
        sessionStorage.setItem('businessType', data.businessType)  // 业务类型
        sessionStorage.setItem('clientIdentity', self.clientIdentity)  // 客户身份
        sessionStorage.setItem('clientNature', self.clientNature)  // 开立对公户性质
        // 营业执照
        if (data.bussinessLicense) {
          self.bussinessLicense = data.bussinessLicense
        }
        // 单位、企业基本信息
        self.cusInfoData = data.cusInfoData
        // 法人基本信息
        self.legalCusInfoData = data.legalCusInfoData
        if (data.legalCusInfoData.idCardFront) {
          self.legalFrontUrl = window.CONFIG.fileServer + '/get?filename=' + data.legalCusInfoData.idCardFront
        }
        if (data.legalCusInfoData.idCardBack) {
          self.legalReverseUrl = window.CONFIG.fileServer + '/get?filename=' + data.legalCusInfoData.idCardBack
        }
        // 经办人基本信息
        self.operatorCusInfoData = data.operatorCusInfoData
        if (data.operatorCusInfoData.idCardFront) {
          self.frontUrl = window.CONFIG.fileServer + '/get?filename=' + data.operatorCusInfoData.idCardFront
        }
        if (data.operatorCusInfoData.idCardBack) {
          self.reverseUrl = window.CONFIG.fileServer + '/get?filename=' + data.operatorCusInfoData.idCardBack
        }
        // 如果客户是法人，则刚进线客户信息将经办人信息更新为法人的基本信息
        if (self.legalIdentityFlag === sessionStorage.getItem('clientIdentity')) {
          if (data.legalCusInfoData.idCardFront) {
            self.frontUrl = window.CONFIG.fileServer + '/get?filename=' + data.legalCusInfoData.idCardFront
          }
          if (data.legalCusInfoData.idCardBack) {
            self.reverseUrl = window.CONFIG.fileServer + '/get?filename=' + data.legalCusInfoData.idCardBack
          }
        }
        // 签约信息-网上银行
        self.onlineCheckData = data.onlineCheckData
        // 签约电话银行
        self.phoneCheckData = data.phoneCheckData
        // 支付密码业务
        self.payPwdCheckData = data.payPwdCheckData
        // 回单系统
        self.receiptCheckData = data.receiptCheckData
        // 短信银行
        self.msgCheckData = data.msgCheckData
        // 银企对账
        self.factReconCheckData = data.factReconCheckData
        // 交割信息
        self.deliveryInfoData = data.deliveryInfoData
        // 开户确认书
        self.openAccountList = data.openAccountList
      })
      // 收到抓拍的客户照片成功
      window.eventEmitter.$on('EventOpenVideoSnapSuccess', (data) => {
          self.cusSceneUrl = data.snapUrl
          self.queryCusSenceScoreFun(data.snapUrl)
      })
      // 收到开立对公户性质客户信息确认
      window.eventEmitter.$on('EventCustInfoSuccess', () => {
          self.checkInfoModifyFlag = false
          self.cusInfoOption.column[9].cusInput = false
          self.legalCusInfoOption.column[6].cusInput = false
          self.legalCusInfoOption.column[7].cusInput = false
          self.legalCusInfoOption.column[8].cusInput = false
          self.operatorCusInfoOption.column[6].cusInput = false
          self.operatorCusInfoOption.column[7].cusInput = false
          self.operatorCusInfoOption.column[8].cusInput = false
      })
      // 收到签约客户信息确认
      window.eventEmitter.$on('EventSignInfoSuccess', () => {
          self.btnModifyFlag = false
          self.signCheckSelectFlag = true
          self.onlineCheckData.signModel.forEach((item, index) => {
            item.deleteFlag = false
          })
      })
      // 收到法人拍照图片
      window.eventEmitter.$on('EventInviteSnapSuccess', (data) => {
        self.legalScenePhoto = data.snapUrl
        self.querylegalCusSenceScoreFun(data.snapUrl)
      })
      // 收到短信验证码成功
      window.eventEmitter.$on('EventMsgCodeSuccess', () => {

      })
      // 收到短信验证码失败
      window.eventEmitter.$on('EventMsgCodeFail', () => {
        self.$message.error('法人加入会议失败');
      })
      // 收到表单客户签名显示
      window.eventEmitter.$on('EventGetBizSignForm', (data) => {
        self.btnFlag = 'fromSignatureFlag'
        self.bottomShowFlag = 'confirmSignatureFlag'
        self.signFormContainer = false
        self.signFormContainerUrl = window.CONFIG.fileServer + '/get?filename=' + data.signPhoto
        self.bussinessModelFlag = true
      })
      // 收到客户协议签名显示
      window.eventEmitter.$on('EventGetAgreementSign', (data) => {
        self.btnFlag = 'agreementSignatureFlag'
        self.bottomShowFlag = 'confirmSignatureFlag'
        self.agreementSignature = false
        self.agreementSignatureUrl = window.CONFIG.fileServer + '/get?filename=' + data.signPhoto
      })
      // 收到客户开户确认书签名显示
      window.eventEmitter.$on('EventGetSettleInfo', (data) => {
        self.btnFlag = 'openAccountFlag'
        self.bottomShowFlag = 'confirmSignatureFlag'
        self.openAccountContainer = false
        self.openAccountContainerUrl = window.CONFIG.fileServer + '/get?filename=' + data.signPhoto
      })
      // 收到交割信息确认
      window.eventEmitter.$on('EventSettleInfoConfirm', () => {
        self.isSubmitFlag = true
      })
      // 收到电子凭证信息确认
      window.eventEmitter.$on('EventCreateVoucherConfirm', () => {
        if ('credentialBtnFlagOne' === self.credentialShowFlag) {
          self.credentialShowFlag = 'credentialBtnFlagTwo'
        } else {
          self.credentialShowFlag = 'credentialBtnFlagOne'
        }
      })
      // 收到客户结束交易
      window.eventEmitter.$on('EventOpenVideoEndTransaction', () => {
        self.saveTransPipelineFun()
        self.resetGlobalVarible()
        self.isShowFlag = 'four'
        self.flag2to2 = false
        self.flagEnd = true
      })
    },
    methods: {
      // 步骤条步进
      nextStep (index) {
        this.$emit('nextStep', index)
      },
      // 抓拍客户照片
      openVideoSnap () {
         globalUserData.sendOpenVideoSnap()
      },
      // 客户自助 确认 跳转到客户信息
      next1to2 () {
        this.isShowFlag = 'two'
        globalUserData.sendCustInfoNext()
        this.clientNature = sessionStorage.getItem('clientNature')
        this.clientIdentity = sessionStorage.getItem('clientIdentity')
        this.cusInfoOption = videoOptions.openHouseVideoOption.custOption
        this.legalCusInfoOption = videoOptions.openHouseVideoOption.legalCusInfoOption
        this.operatorCusInfoOption = videoOptions.openHouseVideoOption.operatorCusInfoOption
        this.openAccountOption = videoOptions.openHouseVideoOption.openAccountOption
        if (this.legalIdentityFlag === sessionStorage.getItem('clientIdentity')) {
          this.clientIdentityFlag = false
          this.operatorCusInfoData = {}
        }
      },
      // 信息审核-基本信息-修改
      next2to2 () {
        this.checkInfoModifyFlag = true
        this.cusInfoOption.column[9].cusInput = true
        this.legalCusInfoOption.column[6].cusInput = true
        this.legalCusInfoOption.column[7].cusInput = true
        this.legalCusInfoOption.column[8].cusInput = true
        this.operatorCusInfoOption.column[6].cusInput = true
        this.operatorCusInfoOption.column[7].cusInput = true
        this.operatorCusInfoOption.column[8].cusInput = true
      },
      // 将客户信息发送给客户审核
      sendCheckInfo () {
          let custObj = {
              'cusInfoData': this.cusInfoData,
              'legalCusInfoData': this.legalCusInfoData,
              'operatorCusInfoData': this.operatorCusInfoData
          }
          globalUserData.sendOpenVideoUpdateCusInfo(custObj)
      },
      // 信息审核-基本信息-确认-签约信息
      next2to2to1 () {
        this.isShowFlag = 'three'
        globalUserData.sendSignInfoNext()
        this.onlineBankFlag = this.onlineCheckData.checkStatus
        this.phoneBankFlag = this.phoneCheckData.checkStatus
        this.payPwdBankFlag = this.payPwdCheckData.checkStatus
        this.receiptBankFlag = this.receiptCheckData.checkStatus
        this.msgBankFlag = this.msgCheckData.checkStatus
        this.factReconBankFlag = this.factReconCheckData.checkStatus
        this.signCheckSelectFlag = true
      },
      // 签约信息修改
      modifyEvent () {
        this.btnModifyFlag = true
        this.signCheckSelectFlag = false
      },
      signCheckSelectChange (type, value) {
        if ('online' === type) {
            this.onlineCheckData.checkStatus = value
        } else if ('phone' === type) {
            this.phoneCheckData.checkStatus = value
        } else if ('message' === type) {
            this.msgCheckData.checkStatus = value
        } else if ('factRecon' === type) {
            this.factReconCheckData.checkStatus = value
        } else if ('payPwd' === type) {
            this.payPwdCheckData.checkStatus = value
        } else if ('receipt' === type) {
            this.receiptCheckData.checkStatus = value
        }
      },
      // 签约信息修改-新增
      AddOperator (type) {
        let addObj = {
          'tableHeader': '操作员',
          'deleteFlag': true,
          'tableArray': [
            {
              'name': '姓名',
              'value': '姓名'
            },
            {
              'name': '身份证号码',
              'value': '身份证号码'
            },
            {
              'name': '手机号码',
              'value': '手机号码'
            },
            {
              'name': '职务',
              'value': '职务'
            }
          ]
        }
        if ('online' == type) {
          this.onlineCheckData.signModel.push(addObj)
        }
      },
      // 签约信息修改-删除
      // 网上银行删除
      delOperator (index) {
        this.onlineCheckData.signModel.splice(index, 1)
      },
      // 将更新后的客户信息发送给客户
      sendSignInfoToCustomer () {
        let signObj = {
            'onlineCheckData': this.onlineCheckData,
            'phoneCheckData': this.phoneCheckData,
            'msgCheckData': this.msgCheckData,
            'factReconCheckData': this.factReconCheckData,
            'payPwdCheckData': this.payPwdCheckData,
            'receiptCheckData': this.receiptCheckData
        }
        globalUserData.sendSignInfoToCustomer(signObj)
      },
      // 签约信息确认
      signInfoConfirmEvent () {
        this.isShowFlag = 'four'
        if (this.legalIdentityFlag === this.clientIdentity) {
          this.nextStep(2)
          this.next2to3()
        } else {
          this.nextStep(2)
          globalUserData.sendOpenAccountNext()
        }
      },
      // 信息审核
      handleClick(tab, event) {
        console.log(tab, event);
      },
      // 信息审核点击展开收缩
      showDetailEvent() {
        this.iconShowFlag = !this.iconShowFlag
      },
      // 抓拍法人照片
      openVideoInviteSnap() {
        globalUserData.sendVideoInviteSnap()
      },
      // 邀请法人加入会议
      sendLegalConference () {
        globalUserData.sendJoinConferenceInvitation()
      },
      // 开户意愿确认
      next2to3 () {
        this.flag2to2 = false
        this.flag2to3 = true
        globalUserData.sendOpenAccountNext()
      },
      // 开户意愿确认表单签名确认
      next3to4 () {
        this.bizSignFormData = {
          'title': '苏州农商银行开立单位银行结算账户申请书',
          // 存款人信息
          'depositorInfo': {
            'name': this.cusInfoData.cusName,
            'tel': this.cusInfoData.cusPhone,
            'adress': this.cusInfoData.cusAddress,
            'email': '苏州吴江',
            'type': this.cusInfoData.cusType,
            'groupCode': this.cusInfoData.cusOrganizationCode,
            'time': '2099年 12 月 31 日'
          },
          // 单位负责人
          'UnitPrincipal': this.cusInfoData.cusLegal,
          // 法定代表人
          'LegalRepresentative': this.cusInfoData.cusLegal,
          // 单位负责人 && 法定代表人 && 双热线联系人
          'signModel': [
            {
              'name': this.legalCusInfoData.cusName,
              'certType': '身份证',
              'certNum': this.legalCusInfoData.cusIdCard,
              'time': this.legalCusInfoData.cusIdTimeScope,
            },
            {
              'name': '',
              'profession': '',
              'tel': ''
            },
            {
              'name': '',
              'profession': '',
              'tel': ''
            }
          ],
          // 行业分类
          'bussinessModel': '',
          'bussinessOption': [
              {
                'label': '农、林、牧、渔业',
                'value': '农、林、牧、渔业'
              },
              {
                'label': '采矿业',
                'value': '采矿业'
              },
              {
                'label': '制造业',
                'value': '制造业'
              },
              {
                'label': '电力、燃气及水的生产供应业',
                'value': '电力、燃气及水的生产供应业'
              },
              {
                'label': '建筑业',
                'value': '建筑业'
              },
              {
                'label': '交通运输、仓储和邮政业',
                'value': '交通运输、仓储和邮政业'
              },
              {
                'label': '信息传输、计算机服务及软件业',
                'value': '信息传输、计算机服务及软件业'
              },
              {
                'label': '批发和零售业',
                'value': '批发和零售业'
              },
              {
                'label': '住宿和餐饮业',
                'value': '住宿和餐饮业'
              },
              {
                'label': '金融业',
                'value': '金融业'
              },
              {
                'label': '房地产业',
                'value': '房地产业'
              },
              {
                'label': '租赁和商务服务业',
                'value': '租赁和商务服务业'
              },
              {
                'label': '科学研究、技术服务和地址勘查业',
                'value': '科学研究、技术服务和地址勘查业'
              },
              {
                'label': '水利、环境和公共设施管理',
                'value': '水利、环境和公共设施管理'
              },
              {
                'label': '居民服务和其他服务业',
                'value': '居民服务和其他服务业'
              },
              {
                'label': '教育业',
                'value': '教育业'
              },
              {
                'label': '卫生、社会保障和社会福利业',
                'value': '卫生、社会保障和社会福利业'
              },
              {
                'label': '文化、教育和娱乐业',
                'value': '文化、教育和娱乐业'
              },
              {
                'label': '公共管理和社会组织',
                'value': '公共管理和社会组织'
              },
              {
                'label': '其他行业',
                'value': '其他行业'
              }
          ],
          // 注册资金
          'registeredCapital': this.cusInfoData.cusRegistered,
          // 经营范围
          'scopeBusiness': this.cusInfoData.cusBussinessScope,
          // 证明文件类型
          'supportingType': [],
          'supportingOption': [
            {
              'label': '长期',
              'value': '长期'
            },
            {
              'label': '非长期',
              'value': '非长期'
            }
          ],
          // 证明文件编号
          'supportingNumber': this.cusInfoData.cusFileNo,
          // 有限期限至
          'supportingTime': '2099年 12 月 31 日',
          // 支取方式
          'spendWayModel': [],
          'spendWayModelOption': [
            {
              'label': '印鉴',
              'value': '印鉴'
            },
            {
              'label': '支付密码',
              'value': '支付密码'
            }
          ],
          // 声明
          'statement': '本存款人申请开立单位银行结算账户，并承诺所提供的开户资料真实，有效，遵守单位银行结算账户管理协议。'
        }
        this.flag2to3 = false
        this.flag3to4 = true
        this.nextStep(3)
        globalUserData.sendBizSignFormNext()
      },
      // 将表单发送给客户
      bizSignFormToCustomerEvent(type) {
        if ('fromSignatureFlag' === type) {
          globalUserData.sendBizSignFormToCustomer(this.bizSignFormData)
        } else if ('agreementSignatureFlag' === type) {
          let agreement = {
            'partyA': this.bankName,
            'partyB': this.cusInfoData.cusName,
            'onlineBankStatus': this.onlineBankFlag,
            'factReconBankStatus': this.factReconBankFlag,
            'payPwdBankStatus': this.payPwdBankFlag
          }
          globalUserData.sendAgreementSignToCustomer(agreement)
        } else {

        }
      },
      // 重新发起表单签名发送给客户
      bizResSignFormToCustomerEvent(type) {
        if ('fromSignatureFlag' === type) {
          globalUserData.sendResBizSignFormToCustomer()
        } else if ('agreementSignatureFlag' === type) {
          globalUserData.sendResAgreementToCustomer()
        } else {
          globalUserData.sendResSettleInfo()
        }
      },
      // 客户签名后(未用到)
      afterSignatureEvent(type) {
        if ('fromSignatureFlag' === type) {
          this.btnFlag = 'fromSignatureFlag'
          this.bottomShowFlag = 'confirmSignatureFlag'
        } else if ('openAccountFlag' === type) {
          this.btnFlag = 'openAccountFlag'
          this.bottomShowFlag = 'confirmSignatureFlag'
        } else {
          this.btnFlag = 'agreementSignatureFlag'
          this.bottomShowFlag = 'confirmSignatureFlag'
        }
        $('.signatureContainer').text('签名')
      },
      // 签名确认
      signatureConfirmEvent(type) {
        if ('fromSignatureFlag' === type) {
          this.btnFlag = 'agreementSignatureFlag'
          this.bottomShowFlag = 'afterSignatureBtnFlag'
          $('.signatureContainer').text('协议签名区')
          globalUserData.sendAgreementNext()
        } else if ('agreementSignatureFlag' === type) {
          this.btnFlag = 'openAccountFlag'
          this.bottomShowFlag = 'afterSignatureBtnFlag'
          this.flag3to4 = false
          this.flag4to4 = true
          globalUserData.sendSignatureConfirmNext()
        } else {
          this.flag4to5 = false
          this.flag4to6 = true
          this.nextStep(4)
          globalUserData.sendSignatureNext()
        }
      },
      // 查看协议
      agreementEvent(type) {
        this.agreementFlag = true
        this.flag3to4 = false
        if ("A1" === type) {
          this.isAgreeMentFlag = 'A'
        } else if ("A2" === type) {
          this.isAgreeMentFlag = 'B'
        } else if ("A3" === type) {
          this.isAgreeMentFlag = 'C'
        } else {
          this.isAgreeMentFlag = 'D'
        }
      },
      // 关闭协议
      closeEvent() {
        this.agreementFlag = false
        this.flag3to4 = true
        this.isAgreeMentFlag = ''
      },
      // 表单法人承诺
      settleInfoNextEvent() {
        this.openAccountList.accountNature = this.clientNature
        if (this.bizSignFormData.spendWayModel) {
          this.openAccountList.accountWithdrawalWay = this.bizSignFormData.spendWayModel[0]
        }
        this.flag4to4 = false
        this.flag4to5 = true
        globalUserData.sendSettleInfoNext()
      },
      // 交割信息发送给客户
      sendSignatureToCustomerNext() {
        let obj = this.deliveryInfoData
        globalUserData.sendSignatureToCustomerNext(obj)
      },
      // 交割信息确认(未用到)
      settleInfoConfirmEvent() {
        this.isSubmitFlag = true
      },
      // 交割信息提交
      submitSettleInfoEvent() {
        let phone = ''
        let content = '账户类别:' + this.clientNature +
                      ',实物交割网点:' + this.deliveryInfoData.delivery +
                      ',交割网点地址:' + this.deliveryInfoData.deliveryAddress +
                      ',联系方式:' + this.deliveryInfoData.deliveryTel +
                      ',交割清单:' + $('.submitSettleInfoContent').text()
        if (this.legalIdentityFlag === sessionStorage.getItem('clientIdentity')) {
          phone = this.legalCusInfoData.cusPhone
        } else {
          phone = this.operatorCusInfoData.cusPhone
        }
        this.openVideoSendMessage(phone, content)
        this.flag4to6 = false
        this.flag5to5 = true
        globalUserData.sendSubmitSettleInfo()
      },
      // 生成凭证
      createVoucherEvent() {
        this.bizCertData = {
          // 流水号
          'coreSeqNo': '',
          // 法人信息AND经办人信息
          'customerInfoList': [
            {
              // 法人信息Title
              'customerInfo': '法人信息',
              // 姓名
              'name': this.legalCusInfoData.cusName,
              // 性别
              'sex': this.legalCusInfoData.cusSex,
              // 名族
              'nation': this.legalCusInfoData.cusNation,
              // 出生年月
              'birthday': this.legalCusInfoData.cusBirthday,
              // 身份证件号码
              'IdCard': this.legalCusInfoData.cusIdCard,
              // 证件有效期
              'IdTime': this.legalCusInfoData.cusIdTimeScope,
              // 电话号码
              'tel': this.legalCusInfoData.cusPhone,
              // 联系地址
              'address': this.legalCusInfoData.cusAddress,
              // 职业
              'profession': this.legalCusInfoData.cusProfession,
              // 正面照
              'frontPhoto': this.legalFrontUrl,
              // 反面照
              'backPhoto': this.legalReverseUrl,
              // 联网核查结果
              'internetResult': this.inviteInternetResult,
              // 人脸识别分数
              'faceScore': this.inviteScope,
              // 活体检测结果
              'onlineResult': this.inviteOnlineResult,
              // 经办人标识
              'clientIdentityFlag': true
            },
            {
              // 经办人信息Title
              'customerInfo': '经办人信息',
              // 姓名
              'name': this.operatorCusInfoData.cusName,
              // 性别
              'sex': this.operatorCusInfoData.cusSex,
              // 名族
              'nation': this.operatorCusInfoData.cusNation,
              // 出生年月
              'birthday': this.operatorCusInfoData.cusBirthday,
              // 身份证件号码
              'IdCard': this.operatorCusInfoData.cusIdCard,
              // 证件有效期
              'IdTime': this.operatorCusInfoData.cusIdTimeScope,
              // 电话号码
              'tel': this.operatorCusInfoData.cusPhone,
              // 联系地址
              'address': this.operatorCusInfoData.cusAddress,
              // 职业
              'profession': this.operatorCusInfoData.cusProfession,
              // 正面照
              'frontPhoto': this.frontUrl,
              // 反面照
              'backPhoto': this.reverseUrl,
              // 联网核查结果
              'internetResult': this.internetResult,
              // 人脸识别分数
              'faceScore': this.score,
              // 活体检测结果
              'onlineResult': this.onlineResult,
              // 经办人标识
              'clientIdentityFlag': this.clientIdentityFlag
            }
          ],
          // 业务办理信息
          'bussinessInfoList': [
            {
              'bussType': '网上银行',
              'checkStatus': this.onlineBankFlag
            },
            {
              'bussType': '电话银行',
              'checkStatus': this.phoneBankFlag
            },
            {
              'bussType': '短信银行',
              'checkStatus': this.msgBankFlag
            },
            {
              'bussType': '银企对账',
              'checkStatus': this.factReconBankFlag
            },
            {
              'bussType': '支付密码业务',
              'checkStatus': this.payPwdBankFlag
            },
            {
              'bussType': '回单系统',
              'checkStatus': this.receiptBankFlag
            }
          ],
          // 客户承诺
          'costomeCommitment': '本人承诺，我作为法人代表申请在'+ this.bankName +'开立企业对公账户，账户类别为'+ this.clientNature +'，此次申请开立账户意愿明确，所提供证件正式有效，将严格按照账户管理协议使用该账户，不转借、租借、出售给他人使用，不使用该账户参与诈骗、偷逃税款、逃废债务、贪污受贿、套取现金、洗钱、恐怖融资等其他违法犯罪活动。',
          // 客户签名
          'costomerSignature': this.signFormContainerUrl,
          // 经办人
          'manager': Constants.Agent.agentName,
          // 经办人工号
          'managerNum': Constants.Agent.agentId
        }
        this.flag5to5 = false
        this.flag5to6 = true
        this.nextStep(5)
        globalUserData.sendCreateVoucher()
      },
      // 将凭证发送给客户
      CreateVoucherToCustomer() {
        let obj = this.bizCertData
        globalUserData.sendCreateVoucherToCustomer(obj)
      },
      // 客户确认凭证(未用到)
      credentialConfirmEvent(type) {
        if ('credentialBtnFlagOne' === type) {
          this.credentialShowFlag = 'credentialBtnFlagTwo'
        } else {
          this.credentialShowFlag = 'credentialBtnFlagOne'
        }
      },
      // 提交电子凭证
      credentialSubmitEvent() {
        let self = this
        html2canvas(document.querySelector("#bizVideoHouseCertCanvas"), {
          allowTaint: false
        }).then(function (canvas) {
          console.log('biz cert canvas is: ' + canvas.toDataURL())
          self.dialogVisible = true
          self.bizCertUrl = canvas.toDataURL()
        })
      },
      // 凭证推送到影像平台
      openVideoUploadFileFun() {
        let bizCertBlob = Utils.dataURLtoBlob(this.bizCertUrl)
        let formData = new FormData()
        formData['enctype'] = 'multipart/form-data'
        formData.append('file', bizCertBlob)
        uploadFile(formData).then(response => {
          console.log('response biz cert link is: ' + response.data)
          this.bizCertName = response.data
          this.submitBizCertFun()
        }).catch(error => {
          this.submitBizCertFun()
          console.log(error)
        })
      },
      submitBizCertFun() {
        this.dialogVisible = false
        // 3 文件链接
        let params = {
          "fileInfos": [{
            "fileType": "身份证正面",
            "fileTypeCode": "2601001",
            "fileUrl": this.frontName
          }, {
            "fileType": "身份证反面",
            "fileTypeCode": "2601002",
            "fileUrl": this.reverseName
          }, {
            "fileType": "卡片",
            "fileTypeCode": "2601003",
            "fileUrl": this.mediaCardName
          }, {
            "fileType": "客户现场照",
            "fileTypeCode": "2601004",
            "fileUrl": this.cusSceneName
          }, {
            "fileType": "凭证",
            "fileTypeCode": "2601005",
            "fileUrl": this.bizCertName
          }],
          "filePartName": "ZNKFKJHP",
          "modeCode": "ZNKFKJH",
          "modelName": "卡激活"
        }
        console.log('request submit biz cert data: ' + JSON.stringify(params))
        submitBizCert(params).then(response => {
          let data = response.data
          console.log('response submit biz form data: ' + JSON.stringify(data))
          this.bizCertSeqNo = data.data
          if (200 == data.code) {
            this.flag5to6 = false
            this.flag5to7 = true
            globalUserData.sendSubmitCreateVoucher()
          } else {
            this.flag5to6 = false
            this.flag5to8 = true
            globalUserData.sendSubmitCreateVoucherFail()
            this.certFailReason = data.message
            globalUiKit.notify('提示', '提交电子凭证失败', 'error')
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 结束交易
      endEvent() {
        this.saveTransPipelineFun()
        this.resetGlobalVarible()
        this.isShowFlag = 'four'
        this.flag2to2 = false
        this.flagEnd = true
        globalUserData.sendOpenVideoEndTransaction()
      },
      // 记录交易流水
      saveTransPipelineFun: function () {
        let cusName, cusIdCard
        if (this.legalIdentityFlag === sessionStorage.getItem('clientIdentity')) {
          cusName = this.legalCusInfoData.cusName
          cusIdCard = this.legalCusInfoData.cusIdCard
        } else {
          cusName = this.operatorCusInfoData.cusName
          cusIdCard = this.operatorCusInfoData.cusIdCard
        }
        let params = {
          'transactionDate': '',
          'transactionTime': '',
          'transactionNo': this.bizCertData.coreSeqNo,
          'agentName': Constants.Agent.agentName,
          'agentNo': Constants.Agent.agentId,
          'channelType': Constants.ModelChat.chatType,
          'sessionId': Constants.ModelChat.sid,
          'businessType': '对公开户',
          'openBankName': this.deliveryInfoData.delivery,
          'customerName': cusName,
          'idCardType': '身份证',
          'idCardNo': cusIdCard,
          'cardNo': '',
          'accountName': cusName,
          'transactionAmount': 0,
          'transactionStatus': '',
          'errorMsg': '',
          'isSatisfaction': '',
          'docidNo': Constants.ModelChat.sid,
          'filePartName': 'ZNKFDGKHP',
          'modelCode': 'ZNKFDGKH'
        }
        console.log('request save trans pipeline data: ' + JSON.stringify(params))
        saveTransPipeline(params).then(response => {
          let data = response.data
          console.log('response save trans pipeline data: ' + JSON.stringify(data))
          if (200 == data.code) {
            console.log('记录交易流水成功')
          } else {
            console.log('记录交易流水失败')
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 全局变量重置
      resetGlobalVarible: function () {
        this.frontUrl = 'assets/theme/img/viceoBiz/frontPhoto.png'
        this.reverseUrl = 'assets/theme/img/viceoBiz/reversePhoto.png'
        this.cusSceneUrl = 'assets/theme/img/viceoBiz/perpr.png'
        this.bussinessLicense = 'assets/theme/img/viceoBiz/bussinessLicense.png'
        this.score = 0
        this.scoreColor = 'redColor'
        this.onlineResult = '未通过'
        this.internetResult = '00  公民身份证号码与姓名一致，且存在照片'
        this.clientNature = ''
        this.clientIdentity = ''
        this.cusInfoData = {}
        this.legalCusInfoData = {}
        this.operatorCusInfoData = {}
        this.checkInfoModifyFlag = false
        this.clientIdentityFlag = true
        this.onlineBankFlag = false
        this.onlineCheckData = {}
        this.phoneBankFlag = false
        this.phoneCheckData = {}
        this.payPwdCheckData = {}
        this.payPwdBankFlag = false
        this.receiptCheckData = {}
        this.receiptBankFlag = false
        this.msgBankFlag = false
        this.msgCheckData = {}
        this.factReconBankFlag = false
        this.factReconCheckData = {}
        this.btnModifyFlag = false
        this.signCheckSelectFlag = true
        this.leftActiveName = 'openInfo'
        this.rightActiveName = 'legalPersonID'
        this.iconShowFlag = false
        this.inviteScope = 0
        this.inviteOnlineResult = '未通过'
        this.inviteInternetResult = '00  公民身份证号码与姓名一致，且存在照片'
        this.scoreInviteColor = 'redColor'
        this.legalScenePhoto = 'assets/theme/img/viceoBiz/perpr.png'
        this.legalFrontUrl = 'assets/theme/img/viceoBiz/frontPhoto.png'
        this.legalReverseUrl = 'assets/theme/img/viceoBiz/reversePhoto.png'
        this.deliveryInfoData = {}
        this.openAccountList = {}
        this.flag2to3 = false
        this.flag3to4 = false
        this.flag4to4 = false
        this.flag4to5 = false
        this.flag4to6 = false
        this.flag5to5 = false
        this.flag5to6 = false
        this.flag5to7 = false
        this.flag5to8 = false
        this.accountForm = {
          'radio1': '',
          'radio2': '',
          'radio3': '',
          'radio4': '',
          'radio5': '',
          'radio6': ''
        }
        this.afterSignature = false
        this.fourAgreementFlag = false
        this.bottomShowFlag = 'afterSignatureBtnFlag'
        this.isSubmitFlag = false
        this.btnFlag = 'fromSignatureFlag'
        this.signFormContainer = true
        this.signFormContainerUrl = ''
        this.agreementSignature = true
        this.agreementSignatureUrl = ''
        this.openAccountContainer = true
        this.openAccountContainerUrl = ''
        this.agreementFlag = false
        this.isAgreeMentFlag = ''
        this.bussinessModelFlag = false
        this.bizSignFormData = {
          'title': '苏州农商银行开立单位银行结算账户申请书',
            // 存款人信息
            'depositorInfo': {
              'name': '',
                'tel': '',
                'adress': '',
                'email': '苏州吴江',
                'type': '',
                'groupCode': '',
                'time': '2099年 12 月 31 日'
            },
            // 单位负责人
            'UnitPrincipal': '',
            // 法定代表人
            'LegalRepresentative': '',
            // 单位负责人 && 法定代表人 && 双热线联系人
            'signModel': [
              {
                'name': '',
                'certType': '',
                'certNum': '',
                'time': ''
              },
              {
                'name': '',
                'profession': '',
                'tel': ''
              },
              {
                'name': '',
                'profession': '',
                'tel': ''
              }
            ],
            // 行业分类
            'bussinessModel': '',
            'bussinessOption': [
              {
                'label': '农、林、牧、渔业',
                'value': '农、林、牧、渔业'
              },
              {
                'label': '采矿业',
                'value': '采矿业'
              },
              {
                'label': '制造业',
                'value': '制造业'
              },
              {
                'label': '电力、燃气及水的生产供应业',
                'value': '电力、燃气及水的生产供应业'
              },
              {
                'label': '建筑业',
                'value': '建筑业'
              },
              {
                'label': '交通运输、仓储和邮政业',
                'value': '交通运输、仓储和邮政业'
              },
              {
                'label': '信息传输、计算机服务及软件业',
                'value': '信息传输、计算机服务及软件业'
              },
              {
                'label': '批发和零售业',
                'value': '批发和零售业'
              },
              {
                'label': '住宿和餐饮业',
                'value': '住宿和餐饮业'
              },
              {
                'label': '金融业',
                'value': '金融业'
              },
              {
                'label': '房地产业',
                'value': '房地产业'
              },
              {
                'label': '租赁和商务服务业',
                'value': '租赁和商务服务业'
              },
              {
                'label': '科学研究、技术服务和地址勘查业',
                'value': '科学研究、技术服务和地址勘查业'
              },
              {
                'label': '水利、环境和公共设施管理',
                'value': '水利、环境和公共设施管理'
              },
              {
                'label': '居民服务和其他服务业',
                'value': '居民服务和其他服务业'
              },
              {
                'label': '教育业',
                'value': '教育业'
              },
              {
                'label': '卫生、社会保障和社会福利业',
                'value': '卫生、社会保障和社会福利业'
              },
              {
                'label': '文化、教育和娱乐业',
                'value': '文化、教育和娱乐业'
              },
              {
                'label': '公共管理和社会组织',
                'value': '公共管理和社会组织'
              },
              {
                'label': '其他行业',
                'value': '其他行业'
              }
            ],
            // 注册资金
            'registeredCapital': '',
            // 经营范围
            'scopeBusiness': '',
            // 证明文件类型
            'supportingType': [],
            'supportingOption': [
              {
                'label': '长期',
                'value': '长期'
              },
              {
                'label': '非长期',
                'value': '非长期'
              }
            ],
            // 证明文件编号
            'supportingNumber': '',
            // 有限期限至
            'supportingTime': '',
            // 支取方式
            'spendWayModel': [],
            'spendWayModelOption': [
              {
                'label': '印鉴',
                'value': '印鉴'
              },
              {
                'label': '支付密码',
                'value': '支付密码'
              }
            ],
            // 声明
            'statement': '本存款人申请开立单位银行结算账户，并承诺所提供的开户资料真实，有效，遵守单位银行结算账户管理协议。'
        }
        this.credentialShowFlag = 'credentialBtnFlagOne'
        this.bizCertData = {}
        this.dialogVisible = false
        this.bizCertUrl = ''
        this.bizCertSeqNo = ''
        this.certFailReason = ''
        sessionStorage.removeItem('businessType')
        sessionStorage.removeItem('clientIdentity')
        sessionStorage.removeItem('clientNature')
      },
      /***************************************************************************************
      *****************************************接口相关****************************************
      ****************************************************************************************/
      // 收到经办人抓拍的客户照片成功
      queryCusSenceScoreFun (cusSceneUrl) {
        cusSceneUrl = cusSceneUrl.substring(cusSceneUrl.indexOf('base64,') + 'base64,'.length, cusSceneUrl.length)
        let cusName, cusIdCard
        // 如果客户是法人，则刚进线客户信息将经办人信息更新为法人的基本信息
        if (this.legalIdentityFlag === sessionStorage.getItem('clientIdentity')) {
          cusName = this.legalCusInfoData.cusName
          cusIdCard = this.legalCusInfoData.cusIdCard
        } else {
          cusName = this.operatorCusInfoData.cusName
          cusIdCard = this.operatorCusInfoData.cusIdCard
        }
        let params = {
          'biologicalImgOne': cusSceneUrl,
          'biologicalImgOneType': '',
          'customerName': cusName,
          'customerNo': '',
          'customerType': '',
          'idCardNo': cusIdCard,
          'idCardType': '',
          'netCheckImg': '',
          'netCheckImgType': '',
          'netCheckStatus': ''
        }
        queryCusSenceScore(params).then(response => {
          let data = response.data
          if (200 == data.code && data.data) {
            this.score = data.data.IdnfScore
            if (parseFloat(this.score) >= 0.6) {
              this.onlineResult = '通过'
              this.scoreColor = 'greenColor'
            } else {
              this.onlineResult = '不通过'
              this.scoreColor = 'redColor'
            }
          }
          if (this.legalIdentityFlag === sessionStorage.getItem('clientIdentity')) {
            this.inviteScope = data.data.IdnfScore
            if (parseFloat(this.inviteScope) >= 0.6) {
              this.inviteOnlineResult = '通过'
              this.scoreInviteColor = 'greenColor'
            } else {
              this.inviteOnlineResult = '不通过'
              this.scoreInviteColor = 'redColor'
            }
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 收到法人抓拍的客户照片成功
      querylegalCusSenceScoreFun (legalScenePhoto) {
        legalScenePhoto = legalScenePhoto.substring(legalScenePhoto.indexOf('base64,') + 'base64,'.length, legalScenePhoto.length)
        let params = {
          'biologicalImgOne': legalScenePhoto,
          'biologicalImgOneType': '',
          'customerName': this.legalCusInfoData.cusName,
          'customerNo': '',
          'customerType': '',
          'idCardNo': this.legalCusInfoData.cusIdCard,
          'idCardType': '',
          'netCheckImg': '',
          'netCheckImgType': '',
          'netCheckStatus': ''
        }
        queryCusSenceScore(params).then(response => {
          let data = response.data
          if (200 == data.code && data.data) {
            this.inviteScope = data.data.IdnfScore
            if (parseFloat(this.inviteScope) >= 0.6) {
              this.inviteOnlineResult = '通过'
              this.scoreInviteColor = 'greenColor'
            } else {
              this.inviteOnlineResult = '不通过'
              this.scoreInviteColor = 'redColor'
            }
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 发送短信接口
      openVideoSendMessage (phone, content) {
        let params = {
          'content': content,
          'phone': phone
        }
        sendCodeMessage(params).then(response => {
          let data = response.data
          if (200 == data.code) {
            console.log('send code message success')
          }
        }).catch(error => {
          console.log(error)
        })
      }
    }
  }
</script>
<style scoped>
  .step-box {
    width: 100%;
    margin: 0 auto;
  }

  /************************************* 页面一 *********************************************/
  .mt5{
    margin-top: 5px;
  }

  .mt15{
    margin:15px 0px;
  }

  .warning {
    color: red;
    cursor:pointer;
  }
  .custom-id-title {
    text-align: center;
    margin: 15px 0;
  }

  .papers-photo {
    height: 186px;
    width: 274px;
  }

  .papers-photo img {
    height: 100%;
    width: 100%;
  }

  .card-media-photo img{
    height: 100%;
    width: 100%;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .site-identity-title {
    margin: 20px 0 15px 0;
    text-align: center;
  }

  .peror-photo {
    height: 200px;
    width: 186px;
    overflow: hidden;
  }

  .peror-photo img {
    height: 100%;
    width: 100%;
  }

  .search-result {
    margin: 15px 0 40px 0;
  }

  .per-result {
    margin: 10px 0;
  }

  /************************************* 页面三 *********************************************/
  .mb10{
    margin-bottom: 10px;
  }
  .title-style {
    font-weight: bold;
  }
  .item-topSet{
    padding-top: 6px;
  }
  .custInfo-box{
    padding: 0px 6%;
  }
  .item-style{
    padding: 5px 2%;
  }
  .addOperator-icon{
    margin-bottom: 5px;
    color: red;
  }
  .line-distance{
    height: 40px;
    line-height: 40px;
  }
  /************************************* 页面四 *********************************************/
  .page-box {
    height: 100%;
    width: 100%;
  }
  .left-box, .right-box {
    height: 750px;
  }
  .line-space-special{
    height: 70px;
    word-wrap:break-word
  }
  .rightLeftPadding{
    padding: 0px 20px;
  }
  .paddinglr0{
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
  .mt10{
    margin-top: 10px;
  }
  .view-header {
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #f5f7fa;
  }
  .view-middle {
    height: 650px;
  }
  .view-bottom {
    text-align: center;
    height: 55px;
    line-height: 55px;
  }
  .paddinglr10{
    padding-right: 10px;
    padding-left: 10px;
  }
  .partOne {
    height: 400px;
  }
  .signNameBox {
    border: 1px dashed #ddd;
    height: 225px;
    line-height: 225px;
  }
  .add-border{
    border: 1px solid #ddd;
  }
  .promise-paper{
    padding: 10px;
    line-height:20px;
  }
  .view-middle-header {
    height: 400px;
  }

  .view-middle-bottom {
    height: 250px;
  }
  /***********************************交易结束********************************************/
  .photo-title {
    padding-top: 20px;
    text-align: center;
  }

  .exceed-photo {
    width: 62px;
    height: 62px;
    margin: 0 auto;
  }
  .photo-box {
    padding-top: 160px;
  }

  .padding-line-height{
    line-height: 26px;
  }

  .greenColor {
    color: green;
  }

  .redColor {
    color: red;
  }

  .text-indent{
    text-indent: 24px;
  }
</style>
